﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style2.css">
    <title>用户充值</title>
    <!--bootstrap 依赖jQuery-->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div>
    <div class="container" id="user_account">
        <div class="row">
            <div class="container_logo">
                <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <img src="./images/logo2.png"/>
                </div>
            </div>
        </div>


        <div>
            <div class="row">
                <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <div class="form-group">
                        <input type="hidden" class="getId" name="id">
                        <h4>充值金额</h4>
                        <div class="number_amount">
                            <label>￥</label>
                            <input type="number" name="amount" id="in_amount" :value="dataItem" v-model="dataItem"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="quick_amount col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(100)">100</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(200)">200</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(500)">500</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(1000)">1000</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(2000)">2000</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" @click="getItem(5000)">5000</p>
                </div>
            </div>
            <div class="row">
                <div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <input type="button" value="充值" class="btn btn-primary submit-amount" onclick="checkMoney();"/>
                </div>
            </div>
        </div>

        <!--充值结果提示模态框-->
        <div class="modal fade" tabindex="-1" role="dialog" id='exampleModal3'>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">提示：</h4>
                    </div>
                    <div class="modal-body">
                        <p>{{respMsg}}</p><!--充值成功！点击确定跳转到账户管理页面-->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close"
                                onclick="goToAccountManagement();">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<!--模态框提示-->
<div class="modal fade" tabindex="-1" role="dialog" id='exampleModal'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>输入金额不能超过5000000元</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">确定
                </button>
            </div>
        </div>
    </div>
</div>
<!--模态框提示-->
<div class="modal fade" tabindex="-1" role="dialog" id='exampleModal2'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">提示：</h4>
            </div>
            <div class="modal-body">
                <p>输入金额要大于0元</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="mask"></div>

<script>

    //检查输入的金额是否合法
    function checkMoney() {
        let num = $("#in_amount").val();
        if (num <= 0) {
            $('#exampleModal2').modal('show');
            return false;
        } else if (num > 5000000) {
            $('#exampleModal').modal('show');
            let $amountInput = $('[type="number"]');
            return;
        } else {
            //调用函数发起异步请求，进行充值
            let userInfo = checkUserLogin();
            if (userInfo == null) {
                return false;
            }
            account_vm.addBalance(userInfo);
            return true;
        }
    }

    //跳转到用户账户管理页面
    function goToAccountManagement() {
        location.href = appendBeforeHost("user_account_management.html");
        return;
    }

    var account_vm = new Vue({
        el: "#user_account",
        data: {
            dataItem: 100, //数据项
            respData: 0,
            respMsg: "失败！"
        },
        methods: {
            getItem: function (dataNum) {
                console.log("dataNum==========");
                console.log(dataNum);
                this.dataItem = dataNum;
            },

            addBalance: function (user) {
                let url = "userAccount/addUserBalanceByUserId.do";
                console.log("userid======" + user.userID);
                let params = {
                    userId: user.userID,
                    money: this.dataItem
                };
                let vue_quote = this;
                postWithParams(url, params, function (data) {
                    if (data == 1) {
                        vue_quote.respMsg = "充值成功！点击确定跳转到账户管理页面";
                    } else {
                        vue_quote.respMsg = "充值失败！点击确定跳转到账户管理页面";
                    }
                    $('#exampleModal3').modal('show'); //触发模态框
                    vue_quote.respData = data;
                })
            }
        }
    });

</script>

</body>
</html>